<script setup>
import { getTreeApi, updateApi, getByIdApi, delApi, saveApi } from '@/api/sysDept';
import { ref, onMounted } from 'vue';
import $bus from "../../utils/bus";
// ---------------------------------------------------------------------获取查询---------------------------------------------------------------------
const dataList = ref([]);
const selectedList = ref([])
const updateShow = ref(true)
const delShow = ref(true)
const getData = async () => {
  const res = await getTreeApi();
  dataList.value = res.data;
};
const getPage = () => {
  getData();
};
const clear = () => {
  getData()
};
const handleSelectionChange = (value) => {
  selectedList.value = value
  if (value.length == 1) {
    delShow.value = false
    updateShow.value = false
  } else if (value.length > 1) {
    updateShow.value = true
  } else {
    delShow.value = true
    updateShow.value = true
  }
}
// ---------------------------------------------------------------------添加修改---------------------------------------------------------------------
const open = ref(false)
const title = ref('弹出框dialog')
const formRef = ref(null)
const save = () => {
  open.value = true
  title.value = '添加部门'
}
const form = ref({
  deptName: '',
  deptDes: '',
  deptParentId: 0,
  deptLev: 1,
})
const formRule = ref({
  deptName: [
    { required: true, message: "不能为空", trigger: "blur" },
    { min: 2, max: 30, message: "长度为2到20", trigger: "blur" },
  ],
  deptLev: [
    { required: true, message: "不能为空", trigger: "blur" },
    { min: 1, max: 2, message: "只能添加一级二级部门", trigger: "blur", type: "number" },
  ]
})
const props = ref({
  checkStrictly: true,
  multiple: false, // 启用多选
  //  emitPath: false, // 只返回该节点的值
  value: "id", // 自定义当前数组的键名 - value
  label: "deptName", // 自定义当前数组的键名 - label
  children: "children", // 自定义当前数组的键名 - children
  //  expandTrigger: "click", // 次级菜单的展开方式 - click/hover
  //  lazy: "false", // 是否动态加载子节点，需与 lazyLoad 方法结合使用
  //  lazyLoad: "false", // 加载动态数据的方法，仅在 lazy 为 true 时有效
})
const colseReset = () => {
  form.value = {
    deptName: '',
    deptDes: '',
    deptParentId: 0,
    deptLev: 1,
  }
}
const cascaderChange = (value) => {
  form.value.deptParentId = value[value.length - 1]
  form.value.deptLev = (value.length + 1)
}
const closeDialog = () => {
  open.value = false
  formRef.value.resetFields()
  colseReset()
}
const update = async (id) => {
  open.value = true
  title.value = '修改部门'
  if (!id) {
    id = selectedList.value[0].id
  }
  const res = await getByIdApi(id)
  form.value = res.data
}
const submit = () => {
  if (form.value.id) {
    formRef.value.validate(async (valid) => {
      if (!valid) {
        return
      }
      const res = await updateApi(form.value)
      ElMessage({
        message: res.data,
        type: "success",
      });
      getData()
      closeDialog()
    })
  } else {
    formRef.value.validate(async (valid) => {
      if (!valid) {
        return
      }
      const res = await saveApi(form.value)
      ElMessage({
        message: res.data,
        type: "success",
      });
      getData()
      closeDialog()
    })
  }
}
// ---------------------------------------------------------------------删除--------------------------------------------------------------------
const del = (id) => {
  if (!id) {
    id = selectedList.value.map(item => item.id)
  }
  // console.log(id)
  ElMessageBox.confirm('确认删除？', '删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const res = await delApi(id)
    ElMessage({
      type: 'success',
      message: res.data,
    })
    getData()
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })
}
//---------------------------------------------------------------------获取标题事件---------------------------------------------------------------------
const titleData = ref({
  titleFir: "系统管理",
  titleSec: "部门管理",
});
onMounted(() => {
  $bus.emit("title-info", titleData.value);
  getData();
});
</script>

<template>
  <el-card>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button icon="Search" type="primary" @click="getPage()">查询</el-button>
        <el-button icon="RefreshRight" type="info" @click="clear()">重置</el-button>
      </el-form-item>
      <br />
      <!-- <el-divider border-style="dashed"/> -->
      <el-form-item>
        <el-button icon="Plus" plain type="warning" @click="save()">添加</el-button>
        <el-button icon="Edit" plain :disabled="updateShow" type="success" @click="update()">修改</el-button>
        <el-button icon="Delete" plain :disabled="delShow" type="danger" @click="del()">删除</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-card>
    <el-table :data="dataList" @selection-change="handleSelectionChange" stripe fit default-expand-all row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" scrollbar-tabindex>

      <el-table-column type="selection" width="55" align="center" />

      <el-table-column width="55" type="index" label="序号"></el-table-column>
      <el-table-column label="部门名称" prop="deptName"></el-table-column>
      <el-table-column label="部门描述" prop="deptDes"></el-table-column>
      <el-table-column label="部门等级" prop="deptLev"></el-table-column>

      <el-table-column fixed="right" width="150" label="操作">
        <template #default="data">
          <el-button icon="Edit" link type="success" size="small" @click="update(data.row.id)">修改</el-button>
          <el-button icon="Delete" link type="danger" size="small" @click="del(data.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
  </el-card>

  <el-dialog v-model="open" :title="title" width="50%" :before-close="closeDialog" draggable>
    <el-form :model="form" label-width="auto" :rules="formRule" ref="formRef">

      <el-form-item label="部门名称" prop="deptName">
        <el-input v-model="form.deptName" />
      </el-form-item>

      <el-form-item label="部门描述" prop="deptDes">
        <el-input v-model="form.deptDes" />
      </el-form-item>

      <el-form-item label="上级部门">
        <el-cascader v-model="form.deptParentId" placeholder="请输入上层部门" :options="dataList" :props="props"
          @change="cascaderChange" />
      </el-form-item>

      <el-form-item label="菜单等级" prop="deptLev">
        <el-input v-model="form.deptLev" disabled />
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog()">取消</el-button>
        <el-button type="primary" @click="submit()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
